<template>
    <div>
        <div class="weather">
            <div style="flex: 1;">
                <div class="weather_left">
                    <div class="city">武汉市</div>
                    <div class="datetime">
                        <span>{{ weather['fxDate'] }}</span>
                        <span class="base-week">{{ weather['week'] }}</span>
                        <span class="temp">{{ weather['tempMin'] }} - {{ weather['tempMax'] }}℃</span>
                    </div>
                </div>
                <div class="weather_icon">
                    <i class="icon" :class="weather['icon-day']"></i>
                </div>
            </div>
            <div class="hum">
                <div class="hum_label">空气湿度</div>
                <div class="hum_value">{{ weather['humidity'] }}%</div>
            </div>
        </div>
        <div class="weath_7">
            <div class="weath_day" v-for="(item, index) in weatherList " :key="index">
                <div class="week">{{ item['week'] }}</div>
                <i :class="item['icon-day']"></i>
                <div class="temp">{{ item['tempMin'] }} - {{ item['tempMax'] }}℃</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getWeatherByCityLoc } from '@/utils/weather';
import 'qweather-icons/font/qweather-icons.css';
import dayjs from 'dayjs';
import { useStore } from '@/stores';
const store = useStore();
const weather = ref({});
const weatherList = ref([]);

const city = ref({
    city: {}
});//城市

onMounted(() => {
    getWeatherDataNew();
});
const getWeatherDataNew = () => {
    const whLoc = import.meta.env.VITE_WEATHER_LOC;
    getWeatherByCityLoc(whLoc).then(res => {
        if (res && res['weather']) {
            const daily = res['weather']['daily'];
            const today = dayjs().format('YYYY-MM-DD');
            weather.value = daily.find(el => el.fxDate == today);
            weatherList.value = daily;
            city.value = store.city;
        }
    });
}

</script>
<style scoped lang="scss">
.weather {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #CFE7FA;
    padding-top: 20px;

    .weather_left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .city {
            font-size: 20px;
        }

        .datetime {
            font-size: 20px;
        }

        .base-week {
            margin-left: 20px;
        }

        .temp {
            font-size: 20px;
            margin-left: 20px;
        }



        .detail {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            width: 100%;
            padding-top: 20px;

            .detail_item {
                display: flex;
                justify-content: center;
                align-items: center;

                .detail_icon {
                    width: 24px;
                    height: 24px;
                }

                .detail_value {
                    font-size: 18px;
                }
            }
        }
    }

    .weather_icon {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
            font-size: 80px;
            color: #29F1FA;
        }
    }


    .hum {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px;

        .hum_label {
            font-size: 18px;
        }

        .hum_value {
            font-size: 70px;
        }
    }

}

.weath_7 {
    padding-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    color: #FFF;

    .weath_day {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        i {
            font-size: 62px;
            color: #29F1FA;
        }

        .week {
            font-size: 18px;
        }

        .temp {
            font-size: 18px;
        }
    }
}

:deep(.el-select__wrapper) {
    background-color: transparent;
    box-shadow: 0 0 0 1px #29F1FA inset;
}

:deep(.el-select__wrapper.is-hovering:not(.is-focused)) {
    box-shadow: 0 0 0 1px #29F1FA inset;
}

:deep(.el-select__caret) {
    color: #29F1FA;
}

:deep(.el-select__selected-item) {
    color: #29F1FA;
}
</style>